<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分页</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="page"></div>
		
		
		<script type="text/javascript">
			// 加载laypage模块
			layui.use("laypage",function(){
				var laypage = layui.laypage;
				
				// 加载laypage实例
				/* laypage.render({
					elem:"page", // elem属性绑定的是容器的ID属性值，不需要加#
					count:100, // 总数量，一般是从服务器获取
					limit:5, // 每页显示的数量
					limits:[5,10,20,30], // 每页条数的选择项
					layout:['prev', 'page', 'next','limit','count'], // 自定义排版
					groups:10, // 连续显示的页码数
				}); */
				
				/* 切换分页的回调 */
				laypage.render({
				    elem: 'page'
				    ,count: 100 //数据总数，从服务端得到
				    ,groups:10 // 连续出现的页码个数
				    ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
				    ,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
				    ,jump: function(obj, first){
				        // obj包含了当前分页的所有参数，比如：
				        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
				        console.log(obj.limit); //得到每页显示的条数
				
				        //首次不执行
				        if(!first){
				            //do something
				        }
				    }
				});
				
				
			});
			
			
		</script>
		
	</body>
</html>
